<template name="zy-search">
	<view>

		<view class="search">
			<!-- <image src="../../static/zy-search/voice.svg" mode="aspectFit" @click="startRecognize()" class="voice-icon">
			</image> -->
			<template v-if="isFocus">
				<input maxlength="20" focus type="text" value="" confirm-type="search" @confirm="searchStart()"
					placeholder="请输入关键词搜索" v-model.trim="searchText" @input="ShowValue" @focus="ShowValue" />
			</template>
			<template v-else>
				<input maxlength="20" type="text" value="" confirm-type="search" @confirm="searchStart()"
					placeholder="请输入关键词搜索" v-model.trim="searchText" @input="ShowValue" @focus="ShowValue" />
			</template>
			<text @click="searchStart()">搜索</text>
			<!-- 	<image src="../../static/zy-search/search.svg" mode="aspectFit" @click="searchStart()" class="search-icon">
			</image> -->
		</view>
		<view v-show="isShowList==1" class="auto-ul">
			<view v-for="(item,index) in autolist" :key="index">
				<image src="../../static/zy-search/search.svg" mode="aspectFit">
					<text @click="keywordsClick(item.name)">{{item.name}}</text>
			</view>
		</view>
		<view v-show="isShowList==0">
			<view :class="'s-' + theme" v-if="hList.length > 0">
				<view class="header">
					历史记录
					<image src="../../static/zy-search/delete.svg" mode="aspectFit" @click="delhistory"></image>
				</view>
				<view class="list">
					<view v-for="(item,index) in hList" :key="index" @click="keywordsClick(item)">{{item}}</view>
				</view>
			</view>
			<view :class="'wanted-' + theme" v-if="showWant">
				<view class="header">历史搜索</view>
				<view class="list">
					<view v-for="(item,index) in hotList" :key="index" @click="keywordsClick(item)">{{item}}</view>
				</view>
			</view>
		</view>
		<view v-show="isShowList == 2">
			<view class="head-nav">
				<view @click="checkIndex(0)"> <text :class="navIndex==0?'activite':''">全部</text> </view>
				<view @click="checkIndex(1)"> <text :class="navIndex==1?'activite':''">项目</text></view>
				<view @click="checkIndex(2)"> <text :class="navIndex==2?'activite':''">材料</text></view>
			</view>

			<!-- 内容切换 -->
			<view class="content" v-if="navIndex==0">
				<view class="project_box" @click="goToDatail()">
					<view class="list_top">
						<view class="list_left">
							<image src="http://106.14.56.171:15016/images/u425.png" mode=""></image>
							<text>管道内壁耐磨防腐</text>
						</view>
						<view class="list_right">
							<text>施工中 </text>
							<image src="http://106.14.56.171:15016/images/u3063.png" mode=""></image>
						</view>
					</view>
					<view class="list_base">
						<view class="base_left">
							<image src="http://106.14.56.171:15016/images/u432.png" mode=""></image>
						</view>
						<view class="base_right">
							<view>
								<text class="base_right_text">业主单位</text>
								<text>上海梅山钢铁股份有限公司</text>
							</view>
							<view>
								<text class="base_right_text">业主单位</text>
								<text>上海易乓乒智能科技股份有限公司</text>
							</view>
							<view style="width: 96%;">
								<progress percent="70" activeColor="red" show-info stroke-width="4" />
							</view>
						</view>
					</view>
				</view>

				<view class="project_box">
					<view class="list_top">
						<view class="list_left">
							<image src="http://106.14.56.171:15016/images/u456.png" mode=""></image>
							<text>产品名称</text>
						</view>
						<view class="list_right">

							<image src="http://106.14.56.171:15016/images/u3063.png" mode=""></image>
						</view>
					</view>
					<view class="list_base">
						<view class="base_left">
							<image src="http://106.14.56.171:15016/images/u458.png" mode=""></image>
						</view>
						<view class="base_right_materials">
							<view>
								<text class="base_right_text">分类</text>
								<text style="color: #FF6600;">防腐</text>
								<text>类</text>
							</view>
							<view>
								<text class="base_right_text">品牌</text>
								<text>佑尼威 Uniwell</text>
							</view>

						</view>
					</view>
				</view>

			</view>
			<view class="content" v-if="navIndex==1">
				<view class="project_box" @click="goToDatail()">
					<view class="list_top">
						<view class="list_left">
							<image src="http://106.14.56.171:15016/images/u425.png" mode=""></image>
							<text>管道内壁耐磨防腐</text>
						</view>
						<view class="list_right">
							<text>施工中 </text>
							<image src="http://106.14.56.171:15016/images/u3063.png" mode=""></image>
						</view>
					</view>
					<view class="list_base">
						<view class="base_left">
							<image src="http://106.14.56.171:15016/images/u432.png" mode=""></image>
						</view>
						<view class="base_right">
							<view>
								<text class="base_right_text">业主单位</text>
								<text>上海梅山钢铁股份有限公司</text>
							</view>
							<view>
								<text class="base_right_text">业主单位</text>
								<text>上海易乓乒智能科技股份有限公司</text>
							</view>
							<view style="width: 96%;">
								<progress percent="70" activeColor="red" show-info stroke-width="4" />
							</view>
						</view>
					</view>
				</view>

			</view>
			<!-- 产品名称 -->
			<view class="content" v-if="navIndex==2">
				
				<view class="project_box">
					<view class="list_top">
						<view class="list_left">
							<image src="http://106.14.56.171:15016/images/u456.png" mode=""></image>
							<text>产品名称</text>
						</view>
						<view class="list_right">

							<image src="http://106.14.56.171:15016/images/u3063.png" mode=""></image>
						</view>
					</view>
					<view class="list_base">
						<view class="base_left">
							<image src="http://106.14.56.171:15016/images/u458.png" mode=""></image>
						</view>
						<view class="base_right_materials">
							<view>
								<text class="base_right_text">分类</text>
								<text style="color: #FF6600;">防腐</text><text>类</text>
							</view>
							<view>
								<text class="base_right_text">品牌</text>
								<text>佑尼威 Uniwell</text>
							</view>

						</view>
					</view>
				</view>

			</view>
		</view>
		
		<!-- 产品名称 -->
			<view class="content" v-if="navIndex==2">
				
				<view class="project_box">
					<view class="list_top">
						<view class="list_left">
							<image src="http://106.14.56.171:15016/images/u456.png" mode=""></image>
							<text>产品名称</text>
						</view>
						<view class="list_right">
		
							<image src="http://106.14.56.171:15016/images/u3063.png" mode=""></image>
						</view>
					</view>
					<view class="list_base">
						<view class="base_left">
							<image src="http://106.14.56.171:15016/images/u458.png" mode=""></image>
						</view>
						<view class="base_right_materials">
							<view>
								<text class="base_right_text">分类</text>
								<text style="color: #FF6600;">防腐</text><text>类</text>
							</view>
							<view>
								<text class="base_right_text">品牌</text>
								<text>佑尼威 Uniwell</text>
							</view>
		
						</view>
					</view>
				</view>
		
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: "zy-search",
		props: {
			isFocus: { //是否自动获取焦点
				type: Boolean,
				default: false
			},
			theme: { //选择块级显示还是圆形显示
				type: String,
				default: 'block'
			},
			showWant: { //是否展示推荐菜单
				type: Boolean,
				default: false
			},
			hotList: { //推荐列表数据
				type: Array,
				default () {
					return []
				}
			},
			speechEngine: { //语音引擎=>讯飞:iFly,百度:'baidu'
				type: String,
				default: 'baidu'
			}
		},
		data() {
			return {
				navIndex: 0,
				searchText: '', //搜索关键词
				hList: uni.getStorageSync('search_cache'), //历史记录
				autolist: [{
						id: 0,
						name: '管道防腐'
					},
					{
						id: 1,
						name: '管道清理'
					},
					{
						id: 2,
						name: '管道防腐1'
					},
					{
						id: 3,
						name: '管道清理1'
					},
					{
						id: 4,
						name: '管道除锈'
					}
				],
				autolisttmp: [{
						id: 0,
						name: '管道防腐'
					},
					{
						id: 1,
						name: '管道清理'
					},
					{
						id: 2,
						name: '管道防腐1'
					},
					{
						id: 3,
						name: '管道清理1'
					},
					{
						id: 4,
						name: '管道除锈'
					}
				],
				isShowList: 0
			};
		},
		methods: {
			ShowValue(event) {
				if (event.target.value.length > 0) {
					this.isShowList = 1;

					this.autolist = this.autolisttmp.filter(res => res.name.indexOf(event.target.value) > -1)
				} else {
					this.isShowList = 0;
				}

			},
			checkIndex(value) {
				this.navIndex = value;
			},
			searchStart: function() { //触发搜索
				let _this = this;
				if (_this.searchText == '') {
					uni.showToast({
						title: '请输入关键字',
						icon: 'none',
						duration: 1000
					});
				} else {
					this.isShowList = 2;
					_this.$emit('getSearchText', _this.searchText);
					uni.getStorage({
						key: 'search_cache',
						success(res) {
							let list = res.data;
							if (list.length > 5) {
								for (let item of list) {
									if (item == _this.searchText) {
										return;
									}
								}
								list.pop();
								list.unshift(_this.searchText);
							} else {
								for (let item of list) {
									if (item == _this.searchText) {
										return;
									}
								}
								list.unshift(_this.searchText);
							}
							_this.hList = list;
							uni.setStorage({
								key: 'search_cache',
								data: _this.hList
							});
						},
						fail() {
							_this.hList = [];
							_this.hList.push(_this.searchText);
							uni.setStorage({
								key: 'search_cache',
								data: _this.hList
							});
							_this.$emit('getSearchText', _this.searchText);
						}
					})
				}
			},
			keywordsClick(item) { //关键词搜索与历史搜索
				this.searchText = item;
				this.searchStart();
			},
			delhistory() { //清空历史记录
				this.hList = [];
				uni.setStorage({
					key: 'search_cache',
					data: []
				});
			},
			goToDatail() {
				this.$emit('goToDatail', '');
			},
			// startRecognize: function() { //语音输入
			// 	let _this = this;
			// 	let options = {};
			// 	options.engine = _this.speechEngine;
			// 	options.punctuation = false; // 是否需要标点符号 
			// 	options.timeout = 10 * 1000;
			// 	plus.speech.startRecognize(options, function(s) {
			// 		_this.searchText = _this.searchText + s;
			// 	});
			// }
		}
	}
</script>

<style lang="less" scoped>
	.head-nav {
		margin-top: 10rpx;
		height: 50rpx;
		display: flex;
		margin-left: 13%;
		justify-content: space-between;
		align-items: center;
		color: #CCCCCC;

		view {
			width: 30%;
			font-size: 40rpx;
		}
	}

	.activite {
		color: red;
		padding-bottom: 13rpx;
		border-bottom: red solid 8rpx;
	}



	.content {
		/* background: #008000; */
		margin-top: 35rpx;
	}

	.auto-ul {
		background-color: #FFF;
		border-radius: 30rpx;
		height: 100%;
		margin-top: 10rpx;
		height: 900rpx;
		overflow: hidden;

		view {
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px #eaeaea solid;
			box-sizing: border-box;
			padding: 0px 3%;
			color: #666;
			font-size: 14px;
		}

		image {
			width: 36rpx;
			height: 36rpx;
			margin-right: 2%;
		}
	}

	.search {
		width: 100%;
		margin-top: 15rpx;
		display: flex;
		align-items: center;

		input {
			background-color: #F7F7F7;
			// padding: 1% 7%;
			text-indent: 22rpx;
			height: 60rpx;
			width: 65%;
			margin-left: 5%;
			font-size: 28upx;
			border-radius: 50upx;
			border: solid 0.2rpx #000
		}

		text {
			padding-left: 3%;
			font-size: 36rpx;
		}

		.voice-icon {
			width: 36upx;
			height: 36upx;
			padding: 16upx 20upx 16upx 0;

			left: 16upx;
			top: 4upx;
			z-index: 10;
		}

		// .search-icon {
		// 	width: 36upx;
		// 	height: 36upx;
		// 	padding: 16upx 20upx 16upx 0;
		// 	position: absolute;
		// 	right: 0;
		// 	top: -2upx;
		// 	z-index: 10;
		// }
	}

	.s-block {
		margin-top: 30upx;

		.header {
			font-size: 32upx;
			padding: 30upx;
			position: relative;

			image {
				width: 36upx;
				height: 36upx;
				padding: 10upx;
				position: absolute;
				right: 40upx;
				top: 24upx;
			}
		}

		.list {
			display: flex;
			flex-wrap: wrap;

			view {
				width: 50%;
				color: #8A8A8A;
				font-size: 28upx;
				box-sizing: border-box;
				text-align: center;
				padding: 20upx 0;
				border-top: 2upx solid #FFF;
				border-left: 2upx solid #FFF;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				background-color: #F7F7F7;
			}
		}
	}

	.s-circle {
		margin-top: 30upx;

		.header {
			font-size: 32upx;
			padding: 30upx;
			border-bottom: 2upx solid #F9F9F9;
			position: relative;

			image {
				width: 36upx;
				height: 36upx;
				padding: 10upx;
				position: absolute;
				right: 40upx;
				top: 24upx;
			}
		}

		.list {
			display: flex;
			flex-wrap: wrap;
			padding: 0 30upx 20upx;

			view {
				padding: 8upx 30upx;
				margin: 20upx 30upx 0 0;
				font-size: 28upx;
				color: #8A8A8A;
				background-color: #fff;
				box-sizing: border-box;
				text-align: center;
				border-radius: 83rpx;
			}
		}
	}

	.wanted-block {
		margin-top: 30upx;

		.header {
			font-size: 32upx;
			padding: 30upx;
		}

		.list {
			display: flex;
			flex-wrap: wrap;

			view {
				width: 50%;
				color: #8A8A8A;
				font-size: 28upx;
				box-sizing: border-box;
				text-align: center;
				padding: 20upx 0;
				border-top: 2upx solid #FFF;
				border-left: 2upx solid #FFF;
				background-color: #F7F7F7;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}

	.wanted-circle {
		margin-top: 30upx;

		.header {
			font-size: 32upx;
			padding: 30upx;
		}

		.list {
			display: flex;
			flex-wrap: wrap;
			padding: 0 30upx 20upx;

			view {
				padding: 8upx 30upx;
				margin: 20upx 30upx 0 0;
				font-size: 28upx;
				color: #8A8A8A;
				background-color: #fff;
				box-sizing: border-box;
				text-align: center;
				border-radius: 83rpx;
			}
		}
	}

	.project_box {
		width: 96%;
		height: 200rpx;
		border-radius: 24rpx;
		background-color: rgba(255, 255, 255, 1);
		margin-left: 2%;
		margin-bottom: 20rpx;
		;
	}

	.list_top {
		height: 40rpx;
		padding-top: 10rpx;
		/* background-color: palegoldenrod; */
		display: flex;
		flex-direction: row;
		justify-content: space-between
	}

	.list_left {
		/* background-color: palegreen; */
		padding-left: 4%;
	}

	.list_left image {
		float: left;
		margin-top: 5rpx;
		margin-right: 15rpx;
		width: 36rpx;
		height: 36rpx;
	}

	.list_left text {
		box-shadow: none;
		font-family: '微软雅黑 Bold', '微软雅黑';
		font-weight: 700;
		font-style: normal;
		font-size: 30rpx;
	}

	.list_right {
		padding-right: 4%;
		/* background-color: palegreen; */

	}

	.list_right image {
		margin-left: 15rpx;

		width: 10rpx;
		height: 20rpx;
	}

	.list_right text {
		display: inline-block;
		background-color: #ecf4f0;
		height: 40rpx;
		width: 120rpx;
		font-size: 24rpx;
		color: #3E9265;
		border-radius: 20rpx;
		text-align: center;
	}

	.list_base {
		margin-top: 20rpx;
		height: 120rpx;
		/* background-color: brown; */
		display: flex;
		flex-direction: row;
	}

	.base_left {
		width: 20%;
		margin-left: 4%;
	}

	.base_right {
		width: 80%;
	}

	.base_right text {
		font-size: 26rpx;
		/* line-height: 30rpx; */
		color: #333;
	}

	.base_right view {
		height: 35rpx;
		margin-top: 5rpx;
		width: 100%;
	}


	.base_right_materials {
		width: 80%;
	}

	.base_right_materials view {
		height: 46%;
		margin-top: 5rpx;
		width: 100%;
	}

	.list_base .base_left image {
		width: 116rpx;
		height: 116rpx;

	}

	.base_right_text {
		font-size: 26rpx;
		color: #616161;
		margin-right: 2%;
	}


</style>
